<%--
  Created by IntelliJ IDEA.
  User: gem-inno
  Date: 2018/9/21
  Time: 13:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<html>
    <head>
        <title>省市区联动</title>
    </head>
    <body>
        省份：
            <select id="province" onchange="addCity(this)">
                <option value="">-请选择-</option>
            </select>
        城市：
            <select id="city" onchange="addArea(this)">
                <option value="">-请选择-</option>
            </select>
        区域：
            <select id="area">
                <option value="">-请选择-</option>
            </select>
    </body>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url:"/ajax/province/list",
                type: "post",//请求方式
                dataType: "json",
                success: function (data) {
                    $.each(data,function (k, v) {
                        // console.log(v.code);
                        $("#province").append("<option value='" + v.code + "'>" + v.name + "</option>");
                    })
                }
            })
        })

        function addCity(obj) {
            //清空原有脏数据
            $("#city").empty();
            $("#city").append("<option value=\"\">-请选择-</option>");
            if($(obj).val()) {//判断获取的值是否为空
                $.ajax({
                    url:"/ajax/city/list",
                    type: "post",//请求方式
                    data: {"provinceId" : $(obj).val()},
                    dataType: "json",
                    success: function (data) {
                        $.each(data,function (k, v) {
                            // console.log(v.code);
                            $("#city").append("<option value='" + v.code + "'>" + v.name + "</option>");
                        })
                    }
                })
            }
        }

        function addArea(obj) {
            //清空原有脏数据
            $("#area").empty();
            $("#area").append("<option value=\"\">-请选择-</option>");
            if($(obj).val()) {//判断获取的值是否为空
                $.ajax({
                    url:"/ajax/area/list",
                    type: "post",//请求方式
                    data: {"cityid" : $(obj).val()},
                    dataType: "json",
                    success: function (data) {
                        $.each(data,function (k, v) {
                            // console.log(v.code);
                            $("#area").append("<option value='" + v.code + "'>" + v.name + "</option>");
                        })
                    }
                })
            }
        }
    </script>
</html>
